﻿<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>评教管理系统</title>
    <!-- <link rel="shortcut icon" href="../static/images/favicon.png" type="image/x-icon">-->
    <link rel="shortcut icon" th:href="@{/images/favicon.png}" type="image/x-icon">
    <!-- layui.css -->
    <!--  <link href="../static/plugin/layui/css/layui.css" rel="stylesheet"/>-->
    <link th:href="@{/plugin/layui/css/layui.css}" rel="stylesheet"/>

    <!-- 本页样式 -->
    <!-- <link href="../static/css/index.css" rel="stylesheet"/>-->
    <link th:href="@{/css/index.css}" rel="stylesheet"/>
    <!-- 本页样式 -->
    <!-- <link href="../static/css/login.css" rel="stylesheet"/>-->
    <link th:href="@{/css/login.css}" rel="stylesheet"/>
   <style>
       .input-val {
           width: 200px;
           height: 32px;
           border: 1px solid #ddd;
           box-sizing: border-box;
       }
       #canvas {
           vertical-align: middle;
           box-sizing: border-box;
           border: 1px solid #ddd;
           cursor: pointer;
       }
       .btn {
           display: block;
           margin-top: 20px;
           height: 32px;
           width: 100px;
           font-size: 16px;
       }
   </style>
</head>
<body>
<div id="particles-js"></div>
<form class="layui-form login-form layui-panel" autocomplete="off">
    <h1 class="login-title">
        <!--    <img style="height: 30px" src="../static/images/logo.png" alt="logo" />-->
        <img style="height: 30px"  th:src="@{/images/logo.png}" alt="logo" />
        <span>评教系统登录页面</span>
    </h1>
    <!-- 用户名 -->
    <div class="layui-form-item">
        <i class="layui-icon layui-icon-username"></i>
        <input type="text" name="username" placeholder="请输入用户名" id="login-userName" class="layui-input" lay-verify="required" lay-reqText="请输入用户名" />
    </div>
    <!-- 密码 -->
    <div class="layui-form-item">
        <i class="layui-icon layui-icon-password"></i>
        <input type="password" name="password" placeholder="请输入密码" id="login-password" class="layui-input" lay-verify="required" lay-reqText="请输入密码" />
    </div>
    <!-- 验证码 -->
    <div class="layui-form-item">
        <i class="layui-icon layui-icon-vercode"></i>
        <input type="text" name="captcha" placeholder="请输入验证码"  id="login-captcha" class="layui-input" lay-verify="required" lay-reqText="请输入验证码" />
        <canvas id="canvas" width="100" height="30"></canvas>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-normal layui-btn-fluid" id="login-btn" type="button" > 登录 </button>
    </div>
</form>

<!-- layui.js -->
<!--<script src="../static/plugin/layui/layui.js"></script>
<script src="../static/js/particles.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>-->
<script th:src="@{/plugin/layui/layui.js}"></script>
<script th:src="@{/js/particles.js}"></script>
<script type="text/javascript" th:src="@{http://libs.baidu.com/jquery/1.7.2/jquery.js}"></script>

<!-- layui规范化用法 -->
<script type="text/javascript">
    layui.use(['layer','form'], function() { //独立版的layer无需执行这一句
        var form = layui.form;
        var $ = layui.jquery,
            layer = layui.layer; //独立版的layer无需执行这一句
        var show_num = [];
        draw(show_num);

        $("#canvas").on('click', function () {
            draw(show_num);
        })

        //生成并渲染出验证码图形
        function draw(show_num) {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度

            for (var i = 0; i < 4; i++) {  //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var deg = Math.random() - 0.5; //产生一个随机弧度
                var txt = aCode[j];//得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 10 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }

        //得到随机的颜色值
        function randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

        $("#login-btn").on('click',function(){
           var userName=$("#login-userName").val();
            var password=$("#login-password").val();
            if(userName==""){
                layer.msg("请填写用户名");
                return;
            }
            if(password==""){
                layer.msg("请填写密码");
                return;
            }
            var val = $("#login-captcha").val().toLowerCase();
            var num = show_num.join("");
            if(val==''){
                layer.msg('请输入验证码！');
            }else if(val == num){
                //页面层
                var loginHtml = ''; //静态页面只能拼接，这里可以用iFrame或者Ajax请求分部视图。html文件夹下有login.html
                loginHtml += '<form class="layui-form" action="">';
                loginHtml += '<div class="layui-form-item">';
                loginHtml += '<label class="layui-form-label">登录类型</label>';
                loginHtml += '<div class="layui-input-inline"><select name="quiz1" class="userType" id="userType">';
                loginHtml += '<option value="1" selected="" >管理员</option><option value="2">教师</option><option value="3">学生</option></select>';
                loginHtml += '</div>';
                loginHtml += '</div>';
                loginHtml += '</form>';
                layer.open({
                    title:'选择登录类型',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['400px', '270px'], //宽高
                    content: loginHtml,
                    btn: ['确认', '取消'],
                    yes: function(){
                        var type=$("#userType").val();
                        $.ajax({
                            type: 'POST',
                            url: "login/login",
                            data: {"username":userName, "password":password, "userType": type},
                            success: function (result) { // 返回的RequestResult的json对象
                                var url = "";
                               if(result.code==100){
                                   if (result.message == "1") {
                                       url = "main";
                                   } else if (result.message == "2") {
                                       url = "mainTea"
                                   } else {
                                       url = "mainStudent";
                                   }
                                   layer.msg('登录成功，正在跳转......', {icon: 6});
                                   setTimeout(function () {
                                       window.location.href = url;
                                   }, 2000);
                               }else{
                                   layer.msg(result.message);
                               }
                            },
                        });
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                });
                layui.form.render();

            }else{
                layer.msg('请输入验证码！');('验证码错误！请重新输入！');
                $("#login-captcha").val();
            }
        })
    });

</script>
</body>
</html>